<script setup lang="ts">
import { reactive, ref } from 'vue'
//登陆信息
const loginForm = reactive({
  userName: '',
  passWord: ''
})
// 注册信息
const registeForm = reactive({
  userName: '',
  passWord: '',
  confirmpassWord: ''
})
const validateName = (rule, value, callback) => {
  const reg = /^[0-9a-zA-Z_]{1,}$/
  if (!value) {
    callback(new Error('请输入用户名'))
  } else if (!reg.test(value)) {
    callback(new Error('用户名仅支持数字、26个英文字母或者下划线组成的字符串'))
  } else {
    callback()
  }
}
const losinFormRule = ref(null)
const registerFormRule = ref(null)
const isRegister = ref(false)
const data = reactive({
  loginRules: {
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  },
  registeRules: {
    userName: [{ validator: validateName, trigger: 'blur',required: true }],
    passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    confirmpassWord: [{ required: true, message: '请确认密码', trigger: 'blur' }]
  }
})
const loginChange = () => {}
const registerChange = () => {
  switchChange()
}
//切换注册、登陆
const switchChange = () => {
  isRegister.value = !isRegister.value
}
</script>

<template>
  <div class="main_login">
    <div class="main_body">
      <div class="img"> </div>
      <div class="main_right">
        <div class="main_logIn" :class="isRegister ? 'contain-Before' : ''">
          <el-form
            label-position="top"
            label-width="100px"
            :model="loginForm"
            :rules="data.loginRules"
            ref="losinFormRule"
          >
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
              <el-input
                v-model="loginForm.passWord"
                show-password
                placeholder="请输入密码"
              ></el-input>
              <div class="register" @click="switchChange">注册</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="singup" @click="loginChange">登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="main_register" :class="isRegister ? 'contain-After' : ''">
          <el-form
            label-position="top"
            label-width="100px"
            :model="registeForm"
            :rules="data.registeRules"
            ref="registerFormRule"
          >
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="registeForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
              <el-input
                v-model="registeForm.passWord"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passWord">
              <el-input
                v-model="registeForm.confirmpassWord"
                show-password
                placeholder="两次输入同一密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="singup" @click="registerChange">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main_login {
  width: 100%;
  height: 100%;
  background-color: #edf2f8;
  display: flex;
  justify-content: center;
  align-items: center;
  .main_body {
    max-width: 1080px;
    width: 100%;
    max-height: 600px;
    height: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    .img {
      width: 40%;
      height: 100%;
      border-radius: 8px 0 0 8px;
      background-size: cover;
      background-image: url('../../assets/6.png');
      background-position: center;
      background-repeat: no-repeat;
    }
    .main_right {
      background-color: white;
      width: calc(100% - 40%);
      border-radius: 0 8px 8px 0;
      padding: 0 100px;
      position: relative;
      // perspective: 1000px;
      box-sizing: border-box;
      .main_logIn {
        width: 100%;
        height: 100%;
        padding: 100px;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;
        transition: 1.5s;
      }
      .main_register {
        width: 100%;
        height: 100%;
        padding: 100px;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotateY(-180deg);
        backface-visibility: hidden;
        transition: 1.5s;
      }
      .register {
        text-align: right;
        position: absolute;
        right: 0;
        color: #66b1ff;
        cursor: pointer;
        z-index: 99;
      }
      .contain-Before {
        transform: rotateY(180deg);
      }
      .contain-After {
        transform: rotateY(0deg);
      }
      .singup {
        width: 100%;
        margin-top: 30px;
      }
    }
    // background-color: yellow;
  }
}
</style>
